@charset "utf-8";
@import "reset";

/*处理px单位的值，转换为rem单位*/
//
//@function r($px) {
//  @return $px/100px*1rem;
//}

.navigation {
        width: 100%;
        height: 100%;
        font-size: 14px;
        text-align: center;
        margin-top: 30px;
        background-color: #dcdcdc;
//      position: fixed;
//      top: 44.5px;
//      left: 0;
//      transition: all 1s;
//      transform: translateX(-100%);
//      z-index: 3;
//      overflow: hidden;
        position: relative; 
        .navigation_close {
            width: 22px;
            height: 22px;
            font-size: 12px;
            line-height: 22px;
            color: white;
            background-color: #b20000;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: r(22px);
            right: r(24px);
        }
        ul{
            width: 176px;
            position: absolute;
            right: 206px;
           &:hover li{
                transform: translateX(139px);
            } 
           li{  
                width: 176px;
                height: 38px;          
                /*perspective: 100px;*/
                background-color: white;
                padding-bottom: 1px;
                margin-bottom: 2px;
                transition: all .3s;
                span:last-child{
                    display: inline-block;
                    width: 38px;
                    height: 37px;
                    line-height: 37px;
                    font-size: 15px;
                    color: white;
                    background-color: #0077a4;
                } 
                span:last-child:hover{
                    background-color: #00ba2a;
                }
                span:first-child{
                    display: inline-block;
                    width: 137px;
                    height: 37px;
                    line-height: 37px;
                    font-size: 13px;  
                    a{
                        color: #8B8B8B;
                        text-decoration:none;   
                        &:hover{
                            color: #0076a4;
                        } 
                    } 
                }
                &:nth-child(1){  
                    transition-delay: 0.1s;
                } 
                &:nth-child(2){  
                    transition-delay: 0.2s;
                }  
                &:nth-child(3){  
                    transition-delay: 0.3s;
                }
                &:nth-child(4){  
                    transition-delay: 0.4s;
                }
                &:nth-child(5){  
                    transition-delay: 0.5s;
                }
                &:nth-child(6){  
                    transition-delay: 0.6s;
                }
                &:nth-child(7){  
                    transition-delay: 0.7s;
                }
                &:nth-child(8){  
                    transition-delay: 0.8s;
                }
                &:nth-child(9){  
                    transition-delay: 0.9s;
                }
                &:nth-child(10){  
                    transition-delay: 1.0s;
                }
                &:nth-child(11){  
                    transition-delay: 1.1s;
                }
                &:nth-child(12){  
                    transition-delay: 1.2s;
                }
            } 
        }
    }
